<template>
  <div>
    <el-card v-for="a in books" class="box-card">
      <div slot="header" class="clearfix">

          <span class="type" @click="goCategory(a[1])">{{a[0]}}</span>

        <el-button style="float: right; padding: 3px 0" @click="goCategory(a[1])" type="text">更多 ></el-button>
      </div>
      <div class="item">
        <el-card shadow="hover" v-for="item in a[2].records" class="item-a">
          <div @click="ogBook(item.id)">
            <el-image :src="item.imgSrc" fit="fill" class="item-img"/>
            <span class="book_name">{{item.name}}</span>
            <span class="item-2">{{item.author}}</span>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { apicard } from '@/request/api';
  export default {
    name: "Card",
    data() {
      return {
        books: []
      }
    },
    created () {
      this.apicard();
    },
    methods: {
      apicard(){
        apicard({

        }).then(res => {
          this.books= res.data.typeAndbook,
              console.log(res)
        })
      },

      //跳转至分类
      goCategory(type_id){
        this.$router.push({
          path: '/Category',
          query: {type_id}
        })
      },
      //跳转至详情
      ogBook(book_id){
        this.$router.push({
          path: '/Details',
          query: book_id
        })
        this.$bus.emit("bookId", book_id);
      }
    }
  }
</script>

<style scoped>
  .box-card {
    margin-bottom: 60px;
    max-height: 432px;
    max-width: 1027px;
  }
  .clearfix {
    margin: 5px 20px 5px;
  }
  .type {
    cursor: pointer;
  }
  .clearfix span {
    font-family: 华文隶书;
    font-size: 35px;
    color: rgb(95, 65, 240);
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  }
  .item {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .item-a {
    border: none;
    margin: -5px 10px 0;
  }
  .item-img {
    max-height: 250px;
    max-width: 250px;
  }
  .book_name {
    text-align:center;
    display: block;
  }
  .item-2 {
    text-align:center;
    display: block;
    color: rgba(0, 0, 0, 0.4);
  }
</style>
